<!DOCTYPE html>
<html>
<head>
	<title>Thumbnails</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.9.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>

  <style type="text/css">
    * {
      /* try to break fotorama layout */
      box-sizing: border-box;
    }
  </style>

  <script type="text/javascript">
    $(function () {
      f = $('.fotorama').data('fotorama');
    })
  </script>
</head>

<body>

<p>Thumbnails:<p>
<pre style="margin-top: -1em; margin-left: 1em;"><code>&lt;div class="fotorama"
     <mark>data-nav="thumbs"</mark>></code></pre>

<p style="width: 50%;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam at autem debitis ea exercitationem, expedita
  fuga impedit labore magnam maiores natus, necessitatibus officia officiis optio quo quos ratione, soluta?</p>

<p>Accusamus debitis dolorum nesciunt! A, blanditiis deleniti est harum maxime nostrum omnis perferendis possimus, quos,
  sed velit voluptas. Beatae commodi distinctio eum expedita hic illum minima nostrum rerum tenetur ullam?</p>

<p>Assumenda, atque eligendi excepturi ipsam molestias optio provident quaerat quis tempore tenetur? Adipisci cupiditate
  harum natus necessitatibus nihil quod temporibus. Amet laborum molestiae nesciunt non praesentium similique. Earum,
  natus, quia.</p>

<!-- Fotorama -->
<div class="fotorama"
     data-thumb-width="96"
     data-width="100%"
     data-ratio="3/2"
     data-nav="thumbs">
	<a href="i/okonechnikov/1-lo.jpg"><img src="i/okonechnikov/1-thumb.jpg" width="144" height="96px"></a>
	<a href="i/okonechnikov/2-lo.jpg" data-width="700" data-height="467"><img src="i/okonechnikov/2-thumb.jpg"></a>
	<a href="i/okonechnikov/4-lo.jpg" data-width="700" data-height="467"></a>
	<a href="i/okonechnikov/5-lo.jpg" data-thumb-width="144" data-thumb-height="144"><img src="i/okonechnikov/5-thumb.jpg"></a>
	<a href="i/okonechnikov/6-lo.jpg"><img src="i/okonechnikov/6-thumb.jpg"></a>
	<a href="i/okonechnikov/7-lo.jpg"><img src="i/okonechnikov/7-thumb.jpg"></a>
	<a href="i/okonechnikov/8-lo.jpg"><img src="i/okonechnikov/8-thumb.jpg"></a>
	<a href="i/okonechnikov/9-lo.jpg"><img src="i/okonechnikov/9-thumb.jpg"></a>
	<a href="i/okonechnikov/10-lo.jpg"><img src="i/okonechnikov/10-thumb.jpg"></a>
	<a href="i/okonechnikov/11-lo.jpg"><img src="i/okonechnikov/11-thumb.jpg"></a>
	<a href="i/okonechnikov/12-lo.jpg"><img src="i/okonechnikov/12-thumb.jpg"></a>
	<a href="i/okonechnikov/13-lo.jpg"><img src="i/okonechnikov/13-thumb.jpg"></a>
	<a href="i/okonechnikov/14-lo.jpg"><img src="i/okonechnikov/14-thumb.jpg"></a>
	<a href="i/okonechnikov/15-lo.jpg"><img src="i/okonechnikov/15-thumb.jpg"></a>
	<a href="i/okonechnikov/16-lo.jpg"><img src="i/okonechnikov/16-thumb.jpg"></a>
	<a href="i/okonechnikov/20-lo.jpg"><img src="i/okonechnikov/20-thumb.jpg"></a>
	<a href="i/okonechnikov/21-lo.jpg"><img src="i/okonechnikov/21-thumb.jpg"></a>
	<a href="i/okonechnikov/22-lo.jpg"><img src="i/okonechnikov/22-thumb.jpg"></a>
	<a href="i/okonechnikov/23-lo.jpg"><img src="i/okonechnikov/23-thumb.jpg"></a>
	<a href="i/okonechnikov/24-lo.jpg"><img src="i/okonechnikov/24-thumb.jpg"></a>
	<a href="i/okonechnikov/17-lo.jpg"><img src="i/okonechnikov/17-thumb.jpg"></a>
	<a href="i/okonechnikov/18-lo.jpg"><img src="i/okonechnikov/18-thumb.jpg"></a>
	<a href="i/okonechnikov/19-lo.jpg"><img src="i/okonechnikov/19-thumb.jpg"></a>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam consequatur deserunt eius eos facere
  laboriosam quisquam quod repudiandae voluptatem. Amet consequatur nisi tenetur! Accusamus eos facere nostrum sint
  tenetur!</p>

<p>Ad debitis doloremque ducimus error exercitationem totam vel. Autem consectetur deleniti dolore iste labore magnam
  porro sapiente similique voluptatum. Eaque laudantium molestias recusandae rem unde velit? Ipsum molestias qui
  totam.</p>

<p>Assumenda consectetur, distinctio eaque est itaque maiores minima molestias obcaecati odit praesentium qui quia rem
  repellat repellendus sunt totam veniam voluptate voluptatibus? Assumenda consequuntur maxime qui quia. Atque, eveniet,
  voluptate?</p>

<p>Adipisci alias animi architecto consectetur consequuntur, deleniti deserunt dignissimos doloremque eius eligendi
  error et explicabo in modi nihil non nostrum numquam omnis, pariatur possimus provident, quisquam soluta temporibus
  vero vitae.</p>

<p>Adipisci atque fuga labore natus nostrum officiis quisquam unde velit voluptas voluptatem! Ab ad aliquid amet
  assumenda cupiditate debitis dolores, facere itaque iure magnam magni obcaecati repellat similique velit
  voluptatem?</p>

<!-- © -->
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>
</body>
</html>